<template>
  <el-card>
    <el-row>
      <el-table
        :data="tableList"
        :border="true"
        :height="500"
        :show-overflow-tooltip="true"
        :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
      >
        <el-table-column prop="createTime" label="创建时间" width="130" />
        <el-table-column prop="createBy" label="操作人" width="130" />
        <el-table-column prop="method" label="请求类型" width="70" />
        <el-table-column prop="requestUrl" label="请求地址" width="300" />
        <el-table-column prop="executionDuration" label="执行时间" width="80">
          <template #default="scope">
            <el-tag v-if="scope.row.executionDuration <= 200" type="success">
              {{ scope.row.executionDuration }}ms
            </el-tag>
            <el-tag v-else-if="scope.row.executionDuration <= 500">
              {{ scope.row.executionDuration }}ms
            </el-tag>
            <el-tag v-else-if="scope.row.executionDuration <= 1000" type="warning">
              {{ scope.row.executionDuration }}ms
            </el-tag>
            <el-tag v-else type="danger">{{ scope.row.executionDuration }}ms</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="requestIp" label="IP" width="100" />
        <el-table-column prop="ipAddress" label="IP归属地" />
        <el-table-column prop="requestParameters" label="请求参数" width="70">
          <template #default="scope">
            <div>
              <el-popover
                width="auto"
                v-if="scope.row.requestParameters && scope.row.requestParameters.trim() !== '{}'"
                :placement="'left-start'"
                trigger="click"
              >
                <div class="popover-box">
                  <pre>{{ JSON.parse(scope.row.requestParameters) }}</pre>
                </div>
                <template #reference>
                  <el-icon style="cursor: pointer; font-size: 20px; vertical-align: middle">
                    <View />
                  </el-icon>
                </template>
              </el-popover>
              <span v-else>{}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="responseData" label="返回数据" width="70" :align="'center'">
          <template #default="scope">
            <div>
              <el-popover
                width="auto"
                v-if="scope.row.responseData && scope.row.responseData.trim() !== '{}'"
                :placement="'left-start'"
                trigger="click"
              >
                <div class="popover-box">
                  <pre>{{ JSON.parse(scope.row.responseData) }}</pre>
                </div>
                <template #reference>
                  <el-icon style="cursor: pointer; font-size: 20px; vertical-align: middle">
                    <View />
                  </el-icon>
                </template>
              </el-popover>
              <span v-else>{}</span>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="operatingSystem" label="操作系统" />
        <el-table-column prop="deviceType" label="设备类型" />
        <el-table-column prop="browserName" label="浏览器名称" />
        <el-table-column prop="version" label="浏览器版本" />
      </el-table>
    </el-row>
    <el-row>
      <Pagination
        :total="search.total"
        v-model:pageIndex="search.pageIndex"
        v-model:pageSize="search.pageSize"
        @change="query()"
      ></Pagination>
    </el-row>
  </el-card>
</template>

<script setup lang="ts">
import AuditLogApi, { AuditLog, AuditLogQuery } from "@/api/monitor/auditLog";
import { View } from "@element-plus/icons-vue";
defineOptions({
  name: "auditLog",
  inherititems: false,
});
const tableList = ref<AuditLog[]>();

//查询条件
const search = reactive<AuditLogQuery>({
  searchString: "",
  total: 0,
  pageIndex: 1, //第几页
  pageSize: 10, //每页多少条
});

onMounted(async () => {
  await query();
});

const query = async () => {
  const { dataList, totalCount } = await AuditLogApi.query(search);
  tableList.value = dataList;
  search.total = totalCount;
};
</script>

<style scoped>
.popover-box {
  background: #112435;
  color: #f08047;
  height: 600px;
  width: 500px;
  overflow: auto;
  scrollbar-width: thin;
}

.popover-box::-webkit-scrollbar {
  display: none;
}
</style>
